<template>
  <section class="page">
    <data-form :model="model" @onSearch="refreshData" :page="pageService">
      <template slot="default-input">
        <el-form-item label="订单编号" prop="orderNo">
          <el-input v-model="model.orderNo"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="name">
          <el-input v-model="model.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="model.phone"></el-input>
        </el-form-item>
        <el-form-item label="会员" prop="isMember">
          <el-select size="small" v-model="model.isMember">
            <el-option v-for="{code,name} in this.$dict.getDict(DictType.WhetherStatus)" :key="code" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="美发师" prop="hairdresserName">
          <el-input v-model="model.hairdresserName"></el-input>
        </el-form-item>
      </template>

      <template slot="default-button">
        <el-button @click="dialog.isOpenCreateOrder = true">创建订单</el-button>
      </template>
    </data-form>

    <data-box :page="pageService" :data="dataList"  @onPageChange="refreshData">
      <template slot="columns">
        <el-table-column prop="orderNo" label="订单编号" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="name" label="客户姓名" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="amount" label="消费金额" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="payType" label="支付方式" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{$dict.dictConvert('PayType', scope.row.payType)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="payChannel" label="支付通道" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{$dict.dictConvert('PayChannel', scope.row.payChannel)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isMember" label="会员" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{$dict.dictConvert('WhetherStatus', scope.row.isMember)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="hairdresserName" label="美发师" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
      </template>
    </data-box>

    <!-- 创建订单 -->
    <el-dialog title="创建订单" :close-on-click-modal="false" :show-close="false" :visible.sync="dialog.isOpenCreateOrder" @open="$nextTick(() => $refs['create-order'].refresh())">
      <create-order ref="create-order" @close="dialog.isOpenCreateOrder = false" @refreshData="refreshData()"></create-order>
    </el-dialog>

  </section>
</template>


<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/util/page.service";
import DataBox from "~/components/common/data-box.vue";
import DataForm from "~/components/common/data-form.vue";
import CreateOrder from "~/components/order-manage/create-order.vue";
import { DictType } from "~/config/enum/dict/dict-type.enum";
import { OrderService } from "~/service/service-order/order.service";
import { denodeify } from "q";

@Layout("workspace")
@Component({
  components: {
    DataBox,
    DataForm,
    CreateOrder
  }
})
export default class OrderSeek extends Vue {
  @Dependencies(PageService)
  private pageService: PageService
  @Dependencies(OrderService)
  private orderService: OrderService

  private model: any = {
    orderNo: '',
    name: '',
    phone: '',
    isMember: '',
    hairdresserName: ''
  }

  private dialog: any = {
    isOpenCreateOrder: false
  }

  private DictType: any = DictType

  private dataList: any[] = []

  private activated() {
    this.refreshData()
  }

  private refreshData() {
    this.orderService.findAllPublicProductList(this.model, this.pageService).subscribe(
      data => this.dataList = data || [],
      error => this.$message.error(error.msg)
    )
  }

}
</script>
<style lang="less">
</style>


